<template>
  <div class="page">
    <div :class="'page-bg ' + (type == 2 ? 'short' : '')">
      <div class="page1">
        <div class="page-title">
          运营监控
        </div>
        <div class="page-content">
          <div class="top">
            <div>
              <h1>运行天数(天)</h1>
              <span>{{ chartData.runDay }}</span>
            </div>
            <div>
              <h1>总工单量(单)</h1>
              <span>{{ chartData.orderAmount }}</span>
            </div>
            <div>
              <h1>总电话量(个)</h1>
              <span>{{ chartData.phoneAmount }}</span>
            </div>
            <div>
              <h1>月最高受理(单)</h1>
              <span>{{ chartData.monthAmount }}</span>
            </div>
            <div>
              <h1>日最高受理(单)</h1>
              <span>{{ chartData.dayAmount }}</span>
            </div>
          </div>

          <div class="tabs">
            <div :class="currentIndex == 1 ? 'active' : ''" @click="changeTab(1)">
              近30天
            </div>
            <div :class="currentIndex == 2 ? 'active' : ''" @click="changeTab(2)">
              近6个月
            </div>
          </div>
          <div class="echarts">
            <div id="echarts01"></div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { echartsConfig } from "@/common/echartsConfig.js";
import requst from "@/api/api";

export default {
  components: {},
  props: {
    type: {
      type: Number,
      default: 1,
    },
  },
  data() {
    return {
      currentIndex: 1,
      chartData: {},
    };
  },
  async mounted() {
    const {
      data: { data },
    } = await requst.get("/api/1/page/1", {});
    this.chartData = data;
    this.changeTab(1);
  },
  methods: {
    changeTab(number) {
      this.currentIndex = number;
      const data = number === 1 ? this.chartData.day30 : this.chartData.month6;
      let params = {
        xAxisData: data.xAxisData,
        yAxisData1: data.yAxisData1,
        yAxisData2: data.yAxisData2,
        number: number,
      };

      this.echarts01(params);
    },
    echarts01(echarts) {
      let emptyColor = "#3559A4";
      let myChart = this.$echarts.init(document.getElementById("echarts01"));
      let option = {
        legend: {
          ...echartsConfig.legend,
          data: ["工单量", "同比"],
          right: "6%",
          top: 30,
        },
        tooltip: {
          trigger: "axis",
          axisPointer: {
            type: "line",
            lineStyle: {
              width: 2,
              type: "dashed",
              color: "rgba(88, 206, 255, 1)",
            },
          },
          borderRadius: 8,
          borderColor: "rgba(88, 206, 255, 0.7)",
          borderWidth: 2,
          backgroundColor: "rgba(10, 29, 88, 0.8)",
          padding: 24,
          formatter: function(params) {
            let currentData = new Date();
            let year = currentData.getFullYear();
            let month = currentData.getMonth() + 1;
            month = month < 10 ? "0" + month : month;
            let day = params[0].axisValue;

            let result =
              "<div>" +
              "<div style='font-size:28rem'>" +
              (echarts.number == 1 ? year + "-" + month + "-" + day : day + "月") +
              "</div>" +
              "<div style='font-size:32rem;margin-top:30rem'>工单 <span style='color:#7DEFFF'>" +
              params[0].value +
              "</span> 单</div>" +
              "<div style='font-size:32rem;margin-top:30rem'>同比 <span style='color:#FFCB8B'>" +
              params[1].value +
              "</span> 单</div>";
            return result;
          },
        },
        title: {
          ...echartsConfig.title,
          text: "工单总量 (单）",
          top: 30,
        },
        grid: {
          ...echartsConfig.grid,
          top: 100,
          right: "6%",
          bottom: this.type == 1 ? 100 : 240,
        },
        yAxis: [
          {
            ...echartsConfig.yAxis,
            splitArea: {
              show: false,
            },
            splitNumber: 3,
          },
        ],
        xAxis: [
          {
            ...echartsConfig.xAxis,
            splitLine: {
              show: false,
            },
            data: echarts.xAxisData,
          },
        ],
        series: [
          {
            name: "工单量",
            type: "line",
            smooth: true,
            symbol: "circle",
            symbolSize: 12,
            zlevel: 3,
            itemStyle: {
              normal: {
                color: "rgba(98, 195, 255, 1)",
                borderColor: "#fff",
                borderWidth: 3,
              },
            },
            lineStyle: {
              normal: {
                color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [
                  { offset: 0, color: "#4394FF" },
                  { offset: 1, color: "#7EEFFF" },
                ]),
                width: 4,
              },
            },
            areaStyle: {
              normal: {
                color: new this.$echarts.graphic.LinearGradient(
                  0,
                  0,
                  0,
                  1,
                  [
                    {
                      offset: 0,
                      color: "rgba(88, 206, 255, 0.2)",
                    },
                    {
                      offset: 1,
                      color: "rgba(88, 206, 255, 0)",
                    },
                  ],
                  false
                ),
              },
            },
            data: echarts.yAxisData1,
            markPoint: {
              symbolSize: 80,
              label: {
                fontSize: 24,
              },
              data: [
                {
                  name: "最大值",
                  type: "max",
                },
              ],
            },
          },
          {
            name: "同比",
            type: "line",
            smooth: true,
            symbol: "none",
            lineStyle: {
              normal: {
                color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [
                  { offset: 0, color: "rgba(255, 217, 147, 1)" },
                  { offset: 1, color: "rgba(255, 124, 96, 1)" },
                ]),
                width: 2,
              },
            },
            data: echarts.yAxisData2,
          },
        ],
      };

      myChart.setOption(option, true);
    },
  },
};
</script>
<style lang="scss" scoped>
.page1 {
  .page-content {
    .top {
      display: flex;
      width: 1568rem;
      margin: 0 auto;
      flex-wrap: wrap;
      margin-top: 88rem;
      justify-content: space-between;

      h1 {
        font-size: 32rem;
        font-weight: 500;
        color: #7defff;
      }
      span {
        font-size: 64rem;
        font-weight: normal;
        color: #ffffff;
        font-family: "Eurostile";
        text-align: center;
        display: block;
      }
    }
    .tabs {
      width: 1568rem;
      margin: 0 auto;
      margin-top: 48rem;
      display: flex;
      flex-direction: row;
      justify-content: center;
      > div {
        position: relative;
        width: 178rem;
        height: 80rem;
        background: rgba(255, 255, 255, 0);
        border-radius: 0 4rem 4rem 0;
        border: 2rem solid #0071ad;
        font-size: 32rem;
        color: #82e8ff;
        text-align: center;
        line-height: 80rem;
        cursor: pointer;

        &.active {
          color: #fff;
          background: linear-gradient(180deg, rgba(0, 144, 255, 0.12) 0%, rgba(0, 240, 255, 0.13) 100%);
          box-shadow: 0 8rem 16rem 0 rgba(0, 229, 255, 0.2);
          border-radius: 4rem 0 0 4rem;
          border: 2rem solid;
          border-image: linear-gradient(180deg, rgba(54, 169, 255, 1), rgba(90, 254, 255, 1)) 2 2;
        }

        &:nth-child(1) {
          &::before {
            content: "";
            background: #305e89;
            width: 614rem;
            height: 2rem;
            position: absolute;
            right: 182rem;
            top: 40rem;
          }
        }
        &:nth-child(2) {
          &::before {
            content: "";
            background: #305e89;
            width: 614rem;
            height: 2rem;
            position: absolute;
            left: 182rem;
            top: 40rem;
          }
        }
      }
    }

    .echarts {
      position: relative;
      width: 1824rem;
      height: 520rem;
      #echarts01 {
        width: 1824rem;
        height: 520rem;
      }
    }
  }
}
</style>
